<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">

	<title>

		Notifications &middot; Application theme &middot; Official Bootstrap Themes

	</title>

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link href="../assets/css/toolkit.css" rel="stylesheet">

	<link href="../assets/css/application.css" rel="stylesheet">

	<style>
		/* note: this is a hack for ios iframe for bootstrap themes shopify page */
		/* this chunk of css is not part of the toolkit :) */
		body
		{
			width: 1px;
			min-width: 100%;
			*width: 100%;
		}
	</style>

</head>


<body class="anf">


<div class="anp" id="app-growl"></div>

<nav class="ck pd ot app-navbar">
	<div class="by">
		<div class="os">
			<button type="button" class="ov collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
				<span class="cv">Toggle navigation</span>
				<span class="ow"></span>
				<span class="ow"></span>
				<span class="ow"></span>
			</button>
			<a class="e" href="../index.html">
				<img src="../assets/img/brand-white.png" alt="brand">
			</a>
		</div>
		<div class="f collapse" id="navbar-collapse-main">

			<ul class="nav navbar-nav st">
				<li>
					<a href="../index.html">Home</a>
				</li>
				<li>
					<a href="../profile/index.html">Profile</a>
				</li>
				<li>
					<a data-toggle="modal" href="#msgModal">Messages</a>
				</li>
				<li>
					<a href="../docs/index.html">Docs</a>
				</li>
			</ul>

			<ul class="nav navbar-nav oh ald st">
				<li class="active">
					<a class="g" href="../notifications/index.html">
						<span class="h wr"></span>
					</a>
				</li>
				<li>
					<button class="cg fm oy ank" data-toggle="popover">
						<img class="cu" src="../assets/img/avatar-dhg.png">
					</button>
				</li>
			</ul>

			<form class="ox oh i" role="search">
				<div class="et">
					<input type="text" class="form-control" data-action="grow" placeholder="Search">
				</div>
			</form>

			<ul class="nav navbar-nav su sv sw">
				<li><a href="../index.html">Home</a></li>
				<li><a href="../profile/index.html">Profile</a></li>
				<li><a href="../notifications/index.html">Notifications</a></li>
				<li><a data-toggle="modal" href="#msgModal">Messages</a></li>
				<li><a href="../docs/index.html">Docs</a></li>
				<li><a href="#" data-action="growl">Growl</a></li>
				<li><a href="../login/index.html">Logout</a></li>
			</ul>

			<ul class="nav navbar-nav hidden">
				<li><a href="#" data-action="growl">Growl</a></li>
				<li><a href="../login/index.html">Logout</a></li>
			</ul>
		</div>
	</div>
</nav>

<div class="cd fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="msgModal" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="d">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<button type="button" class="cg fx fp eg k js-newMsg">New message</button>
				<h4 class="modal-title">Messages</h4>
			</div>

			<div class="modal-body ame js-modalBody">
				<div class="up">
					<div class="qp cj ca js-msgGroup">
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                <img class="cu qi" src="../assets/img/avatar-fat.jpg">
                </span>

								<div class="qh">
									<strong>Jacob Thornton</strong> and <strong>1 other</strong>

									<div class="aoe">
										Aenean eu leo quam. Pellentesque ornare sem lacinia quam &hellip;
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-mdo.png">
                </span>

								<div class="qh">
									<strong>Mark Otto</strong> and <strong>3 others</strong>

									<div class="aoe">
										Brunch sustainable placeat vegan bicycle rights yeah…
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-dhg.png">
                </span>

								<div class="qh">
									<strong>Dave Gamache</strong>

									<div class="aoe">
										Brunch sustainable placeat vegan bicycle rights yeah…
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-fat.jpg">
                </span>

								<div class="qh">
									<strong>Jacob Thornton</strong> and <strong>1 other</strong>

									<div class="aoe">
										Aenean eu leo quam. Pellentesque ornare sem lacinia quam &hellip;
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-mdo.png">
                </span>

								<div class="qh">
									<strong>Mark Otto</strong> and <strong>3 others</strong>

									<div class="aoe">
										Brunch sustainable placeat vegan bicycle rights yeah…
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-dhg.png">
                </span>

								<div class="qh">
									<strong>Dave Gamache</strong>

									<div class="aoe">
										Brunch sustainable placeat vegan bicycle rights yeah…
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-fat.jpg">
                </span>

								<div class="qh">
									<strong>Jacob Thornton</strong> and <strong>1 other</strong>

									<div class="aoe">
										Aenean eu leo quam. Pellentesque ornare sem lacinia quam &hellip;
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-mdo.png">
                </span>

								<div class="qh">
									<strong>Mark Otto</strong> and <strong>3 others</strong>

									<div class="aoe">
										Brunch sustainable placeat vegan bicycle rights yeah…
									</div>
								</div>
							</div>
						</a>
						<a href="#" class="b">
							<div class="qg">
                <span class="qk">
                  <img class="cu qi" src="../assets/img/avatar-dhg.png">
                </span>

								<div class="qh">
									<strong>Dave Gamache</strong>

									<div class="aoe">
										Brunch sustainable placeat vegan bicycle rights yeah…
									</div>
								</div>
							</div>
						</a>
					</div>

					<div class="hide ali js-conversation">
						<ul class="qp aoa">
							<li class="qg aod alt">
								<div class="qh">
									<div class="aob">
										Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit
										libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo
										risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
									</div>
									<div class="aoc">
										<small class="dp">
											<a href="#">Dave Gamache</a> at 4:20PM
										</small>
									</div>
								</div>
								<a class="qj" href="#">
									<img class="cu qi" src="../assets/img/avatar-dhg.png">
								</a>
							</li>

							<li class="qg alt">
								<a class="qk" href="#">
									<img class="cu qi" src="../assets/img/avatar-fat.jpg">
								</a>

								<div class="qh">
									<div class="aob">
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus,
										nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel
										scelerisque nisl consectetur et.
									</div>
									<div class="aob">
										Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Cras
										justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
										vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis
										risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at
										eros.
									</div>
									<div class="aob">
										Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Integer posuere erat a ante
										venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit
										non mi porta gravida at eget metus.
									</div>
									<div class="aoc">
										<small class="dp">
											<a href="#">Fat</a> at 4:28PM
										</small>
									</div>
								</div>
							</li>

							<li class="qg alt">
								<a class="qk" href="#">
									<img class="cu qi" src="../assets/img/avatar-mdo.png">
								</a>

								<div class="qh">
									<div class="aob">
										Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.
										Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna
										mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia
										bibendum nulla sed consectetur.
									</div>
									<div class="aob">
										Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit
										aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
										elit.
									</div>
									<div class="aoc">
										<small class="dp">
											<a href="#">Mark Otto</a> at 4:20PM
										</small>
									</div>
								</div>
							</li>

							<li class="qg aod alt">
								<div class="qh">
									<div class="aob">
										Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit
										libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo
										risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
									</div>
									<div class="aoc">
										<small class="dp">
											<a href="#">Dave Gamache</a> at 4:20PM
										</small>
									</div>
								</div>
								<a class="qj" href="#">
									<img class="cu qi" src="../assets/img/avatar-dhg.png">
								</a>
							</li>

							<li class="qg alt">
								<a class="qk" href="#">
									<img class="cu qi" src="../assets/img/avatar-fat.jpg">
								</a>

								<div class="qh">
									<div class="aob">
										Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus,
										nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel
										scelerisque nisl consectetur et.
									</div>
									<div class="aob">
										Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Cras
										justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
										vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis
										risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at
										eros.
									</div>
									<div class="aob">
										Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Integer posuere erat a ante
										venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit
										non mi porta gravida at eget metus.
									</div>
									<div class="aoc">
										<small class="dp">
											<a href="#">Fat</a> at 4:28PM
										</small>
									</div>
								</div>
							</li>

							<li class="qg all">
								<a class="qk" href="#">
									<img class="cu qi" src="../assets/img/avatar-mdo.png">
								</a>

								<div class="qh">
									<div class="aob">
										Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.
										Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna
										mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia
										bibendum nulla sed consectetur.
									</div>
									<div class="aob">
										Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit
										aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
										elit.
									</div>
									<div class="aoc">
										<small class="dp">
											<a href="#">Mark Otto</a> at 4:20PM
										</small>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="by ams">
	<div class="gd">
		<div class="go">

			<div class="ca alt">
				<a href="#" class="b">
					<span class="h ux eg"></span>
					Notifications
				</a>
				<a href="#" class="b">
					<span class="h ux eg"></span>
					Mentions
				</a>
			</div>

			<div class="qw rd sn sq">
				<div class="qx">
					<h5 class="alc">Photos
						<small>· <a href="#">Edit</a></small>
					</h5>
					<div data-grid="images" data-target-height="150">
						<div>
							<img data-width="640" data-height="640" data-action="zoom" src="../assets/img/instagram_5.jpg">
						</div>

						<div>
							<img data-width="640" data-height="640" data-action="zoom" src="../assets/img/instagram_6.jpg">
						</div>

						<div>
							<img data-width="640" data-height="640" data-action="zoom" src="../assets/img/instagram_7.jpg">
						</div>

						<div>
							<img data-width="640" data-height="640" data-action="zoom" src="../assets/img/instagram_8.jpg">
						</div>

						<div>
							<img data-width="640" data-height="640" data-action="zoom" src="../assets/img/instagram_9.jpg">
						</div>

						<div>
							<img data-width="640" data-height="640" data-action="zoom" src="../assets/img/instagram_10.jpg">
						</div>
					</div>
				</div>
			</div>

			<div class="qw rd sn sq">
				<div class="qx">
					<h5 class="alc">Trending Searches
						<small>· <a href="#">Change</a></small>
					</h5>
					<ul class="eb tc">
						<li><a href="#">#Bootstrap</a>
						<li><a href="#">Mdo for pres</a>
						<li><a href="#">#fatsux</a>
						<li><a href="#">#buyme</a>
						<li><a href="#">#designishard</a>
						<li><a href="#">#helpawesomepeople</a>
						<li><a href="#">#doawesomestuff</a>
						<li><a href="#">Tom Brady</a>
						<li><a href="#">Magna Carta</a>
						<li><a href="#">Mark Otto</a>
						<li><a href="#">Dave Gamache</a>
						<li><a href="#">Jacob Thornton</a>
					</ul>
				</div>
			</div>
		</div>

		<div class="ha">
			<ul class="ca qp anw">
				<li class="b amk">
					<h3 class="alb">Notifications</h3>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h abu dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">1 min</small>
						<div class="qo">
							<a href="#"><strong>Dave Gamache</strong></a> went traveling
						</div>

					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h abq dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">3 min</small>
						<div class="qo">
							<a href="#"><strong>Mark Otto</strong></a> played destiny
						</div>

					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h aju dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">34 min</small>
						<div class="qo">
							<a href="#"><strong>Fat</strong></a> and <a href="#"><strong>1 other</strong></a> followed you
						</div>
						<ul class="ann">
							<li class="ano"><img class="cu" src="../assets/img/avatar-fat.jpg">
							<li class="ano"><img class="cu" src="../assets/img/avatar-dhg.png">
						</ul>
					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h xh dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">3 min</small>
						<div class="qo">
							<a href="#"><strong>Dave Gamache</strong></a> uploaded a photo
						</div>

						<div class="anx" data-grid="images">
							<img style="display: none" data-width="640" data-height="640" data-action="zoom" src="../assets/img/instagram_3.jpg">
						</div>
					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h aaw dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">3 min</small>
						<div class="qo">
							<a href="#"><strong>Mark Otto</strong></a> flagged your post
						</div>

						<div class="qw rd alj">
							<div class="qx">
								<div class="qg">
									<a class="qk" href="#">
										<img
												class="qi cu"
												src="../assets/img/avatar-fat.jpg">
									</a>

									<div class="qh">
										<div class="aob">
											<div class="qo">
												<small class="eg dp">1 hr</small>
												<h5 class="ale">Jacob Thornton</h5>
											</div>
											Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus
											posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
											ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit
											amet, consectetur adipiscing elit.
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h acg dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">4 hr</small>
						<div class="qo">
							<a href="#"><strong>Mark Otto</strong></a> and <a href="#"><strong>2 others</strong></a> favorited your
							post
						</div>
						<ul class="ann">
							<li class="ano"><img class="cu" src="../assets/img/avatar-dhg.png">
							<li class="ano"><img class="cu" src="../assets/img/avatar-mdo.png">
							<li class="ano"><img class="cu" src="../assets/img/avatar-fat.jpg">
						</ul>
					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h aju dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">30 min</small>
						<div class="qo">
							You followed <a href="#"><strong>Jacob Thornton</strong></a> and <a href="#"><strong>1 other</strong></a>
						</div>

						<div class="alj">
							<div class="gd">
								<div class="ha">
									<div class="qw rd aof">
										<div class="qy"
										     style="background-image: url(../assets/img/instagram_3.jpg);"></div>
										<div class="qx dj">
											<img class="aog" src="../assets/img/avatar-fat.jpg">

											<h5 class="qz">Jacob Thornton</h5>

											<p class="alt">Big belly rude boy, million dollar hustler. Unemployed.</p>

											<button class="cg ts fx">
												<span class="h vb"></span> Follow
											</button>
										</div>
									</div>
								</div>

								<div class="ha">
									<div class="qw rd aof">
										<div class="qy"
										     style="background-image: url(../assets/img/instagram_1.jpg);"></div>
										<div class="qx dj">
											<img class="aog" src="../assets/img/avatar-mdo.png">

											<h5 class="qz">Mark Otto</h5>

											<p class="alt">GitHub and Bootstrap. Formerly at Twitter. Huge nerd.</p>

											<button class="cg ts fx">
												<span class="h vb"></span> Follow
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h yk dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">30 min</small>
						<div class="qo">
							<a href="#"><strong>Jacob Thornton</strong></a> and <a href="#"><strong>1 other</strong></a> updated their
							settings
						</div>
						<ul class="ann">
							<li class="ano"><img class="cu" src="../assets/img/avatar-fat.jpg">
							<li class="ano"><img class="cu" src="../assets/img/avatar-dhg.png">
						</ul>
					</div>
				</li>

				<li class="b qg amk">
					<div class="qk">
						<span class="h zb dp"></span>
					</div>

					<div class="qh">
						<small class="eg dp">1 min</small>
						<div class="qo">
							<a href="#"><strong>Jacob Thornton</strong></a> quit his job
						</div>

					</div>
				</li>
			</ul>
		</div>
		<div class="go">
			<div class="qw rd alt st">
				<div class="qx">
					<h5 class="alc">Active Users
						<small>· <a href="#">View All</a></small>
					</h5>
					<ul class="qp anw">
						<li class="qg all">
							<a class="qk" href="#">
								<img
										class="qi cu"
										src="../assets/img/avatar-fat.jpg">
							</a>

							<div class="qh">
								<strong>Jacob Thornton</strong> @fat
								<div class="anz">
									<button class="cg ts fx">
										<span class="h vb"></span> Follow
									</button>
								</div>
							</div>
						</li>
						<li class="qg">
							<a class="qk" href="#">
								<img
										class="qi cu"
										src="../assets/img/avatar-mdo.png">
							</a>

							<div class="qh">
								<strong>Mark Otto</strong> @mdo
								<div class="anz">
									<button class="cg ts fx">
										<span class="h vb"></span> Follow
									</button>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="ra">
					Dave really likes these nerds, no one knows why though.
				</div>
			</div>


			<div class="qw rd">
				<div class="qx">
					© 2015 Bootstrap

					<a href="#">About</a>
					<a href="#">Help</a>
					<a href="#">Terms</a>
					<a href="#">Privacy</a>
					<a href="#">Cookies</a>
					<a href="#">Ads </a>

					<a href="#">info</a>
					<a href="#">Brand</a>
					<a href="#">Blog</a>
					<a href="#">Status</a>
					<a href="#">Apps</a>
					<a href="#">Jobs</a>
					<a href="#">Advertise</a>
				</div>
			</div>
		</div>
	</div>
</div>


<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/chart.js"></script>
<script src="../assets/js/toolkit.js"></script>
<script src="../assets/js/application.js"></script>
<script>
	// execute/clear BS loaders for docs
	$(function ()
	{
		if (window.BS && window.BS.loader && window.BS.loader.length)
		{
			while (BS.loader.length)
			{
				(BS.loader.pop())()
			}
		}
	})
</script>
</body>
</html>